<template>
  <div class="report-container">

    <div class="report-header">
      <h1>个人报告</h1>
      <div class="button-group">
        <el-button type="primary" v-if="!editing" @click="toggleEditing">编辑</el-button>
        <el-button type="success" v-else @click="submitForm">保存</el-button>
        <el-button type="default" v-if="editing" @click="cancelEdit">取消</el-button>
      </div>
    </div>


    <el-form :model="form" ref="form">

      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:">
            <div class="value" v-if="!editing">{{ form.name}}</div>
            <el-input v-model="form.name" v-if="editing" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="手机号:">
            <div class="value" v-if="!editing">{{ form.tel}}</div>
            <el-input v-model="form.tel" v-if="editing" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="体检码:">
            <div class="value">{{ form.t_id}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号:">
            <div class="value" v-if="!editing">{{ form.idcard}}</div>
            <el-input v-model="form.idcard" v-if="editing" placeholder="身份证号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="身高:">
            <div class="value" v-if="!editing">{{ form.height}}</div>
            <el-input v-model="form.height" v-if="editing" placeholder="请输入身高"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="体重:">
            <div class="value" v-if="!editing">{{ form.weight}}</div>
            <el-input v-model="form.weight" v-if="editing" placeholder="请输入体重"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="腰围:">
            <div class="value" v-if="!editing">{{ form.waistline}}</div>
            <el-input v-model="form.waistline" v-if="editing" placeholder="请输入腰围"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="性别:">
            <div class="value" v-if="!editing">{{ form.gender}}</div>
            <el-radio-group v-model="form.gender" v-if="editing">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄:">
            <div class="value" v-if="!editing">{{ form.age}}</div>
            <el-input v-model="form.age" v-if="editing" placeholder="请输入年龄"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族:">
            <div class="value" v-if="!editing">{{ form.nation}}</div>
            <el-input v-model="form.nation" v-if="editing" placeholder="请输入民族"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="12">
          <el-form-item label="小区:">
            <div class="value" v-if="!editing">{{ form.community}}</div>
            <el-input v-model="form.community" v-if="editing" placeholder="小区"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细地址:">
            <div class="value" v-if="!editing">{{ form.address}}</div>
            <el-input v-model="form.address" v-if="editing" placeholder="详细地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="婚姻状况:">
            <div class="value" v-if="!editing">{{ form.marry}}</div>
            <el-select v-model="form.marry" v-if="editing">
              <el-option label="未说明" value="未说明"></el-option>
              <el-option label="未婚" value="未婚"></el-option>
              <el-option label="已婚" value="已婚"></el-option>
              <el-option label="离婚" value="离婚"></el-option>
              <el-option label="丧偶" value="丧偶"></el-option>
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="教育程度:">
            <div class="value" v-if="!editing">{{ form.edu_rank}}</div>
            <el-select v-model="form.edu_rank" v-if="editing">
              <el-option label="文盲" value="文盲"></el-option>
              <el-option label="小学" value="小学"></el-option>
              <el-option label="初中" value="初中"></el-option>
              <el-option label="高中" value="高中"></el-option>
              <el-option label="大学" value="大学"></el-option>
              <el-option label="研究生" value="研究生"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收缩压:">
            <div class="value" v-if="!editing">{{ form.xy_ssy}}</div>
            <el-input v-model="form.xy_ssy" v-if="editing" placeholder="收缩压"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="舒张压:">
            <div class="value" v-if="!editing">{{ form.xy_szy}}</div>
            <el-input v-model="form.xy_szy" v-if="editing" placeholder="舒张压"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="血糖空腹:">
            <div class="value" v-if="!editing">{{ form.xuetang_k}}</div>
            <el-input v-model="form.xuetang_k" v-if="editing" placeholder="血糖空腹"></el-input>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="随机血糖:">
            <div class="value" v-if="!editing">{{ form.xuetang_s}}</div>
            <el-input v-model="form.xuetang_s" v-if="editing" placeholder="随机血糖"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="心电图结果:">
            <div class="value" v-if="!editing">{{ form.heart}}</div>
            <el-input v-model="form.heart" v-if="editing" placeholder="心电图结果"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="胆固醇:">
            <div class="value" v-if="!editing">{{ form.danguchun}}</div>
            <el-input v-model="form.danguchun" v-if="editing" placeholder="胆固醇"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="胆固醇:">
            <div class="value" v-if="!editing">{{ form.danguchun}}</div>
            <el-input v-model="form.danguchun" v-if="editing" placeholder="胆固醇"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="甘油三酯:">
            <div class="value" v-if="!editing">{{ form.ganyousanz}}</div>
            <el-input v-model="form.ganyousanz" v-if="editing" placeholder="甘油三酯"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="血清低密度胆固醇:">
            <div class="value" v-if="!editing">{{ form.xqdmd}}</div>
            <el-input v-model="form.xqdmd" v-if="editing" placeholder="血清低密度胆固醇"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="血清高密度胆固醇:">
            <div class="value" v-if="!editing">{{ form.xqgmd}}</div>
            <el-input v-model="form.xqgmd" v-if="editing" placeholder="血清高密度胆固醇"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="个人疾病史:">
            <div class="value" v-if="!editing">{{ form.person_health}}</div>
            <el-input v-model="form.person_health" v-if="editing" placeholder="个人（健康状况）疾病史"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="父亲-家族史:">
            <div class="value" v-if="!editing">{{ form.father_history}}</div>
            <el-input v-model="form.father_history" v-if="editing" placeholder="父亲-家族史"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="母亲-家族史:">
            <div class="value" v-if="!editing">{{ form.mother_history}}</div>
            <el-input v-model="form.mother_history" v-if="editing" placeholder="母亲-家族史"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="兄弟-家族史:">
            <div class="value" v-if="!editing">{{ form.brothers_history}}</div>
            <el-input v-model="form.brothers_history" v-if="editing" placeholder="母-家族史"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="子女-家族史:">
            <div class="value" v-if="!editing">{{ form.kids_history}}</div>
            <el-input v-model="form.kids_history" v-if="editing" placeholder="子女-家族史"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="医生评价:">
            <div class="value" v-if="!editing">{{ form.judgment}}</div>
            <el-input v-model="form.judgment" v-if="editing" placeholder="医生评价"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

  </div>
</template>

<script>
  import {
    getuser,
    updateuser
  } from "@/api/user/user.js";
  export default {
    data() {
      return {
        checked: true,
        form: {
          name: '万正鑫',
          age: '18',
          gender: '男',
          bloodSugar: '123',
          id: 0
        },
        editing: false
      }
    },
    created() {
      this.id = this.$route.query.id
      console.log('id', this.id);
      this.request(this.id)
    },
    methods: {
      request(id) {
        let _that = this;
        let data = {
          field: 'id',
          op: '=',
          value: id,
          page: 1
        }
        getuser(data).then((res) => {
          console.log('请求成功：', res[0]);
          this.form = res[0]

        })
      },
      toggleEditing() {
        this.editing = true;
      },
      cancelEdit() {
        this.editing = false;
        this.$refs.form.resetFields();
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.editing = false;
            let data = this.form
            Reflect.deleteProperty(data, 'id')
            data.field = "id"
            data.value = this.id
            data.status = 0
            console.log('data:', data);
            updateuser(data).then((res) => {
              console.log("res:", res);
            })
            this.$message.success('保存成功');
          } else {
            this.$message.error('表单验证失败');
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
  .report-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #ddd;
  }

  .button-group {
    margin-top: 30px;
    text-align: right;
  }

  .report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .name,
  .age {
    font-size: 24px;
    font-weight: bold;
  }

  .edit-button {
    padding: 0;
    font-size: 16px;
  }

  .report-content {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
  }
</style>